import React, { useState, useRef, useEffect } from 'react';

import {
  Collapse,
  Tooltip,
  Button,
  Select,
  Form,
  Radio,
  Table,
  InputNumber,
  Checkbox,
  Input,
  message,
  Modal,
  Space,
} from 'antd';
import type { DraggableData, DraggableEvent } from 'react-draggable';
import Draggable from 'react-draggable';

import { QuestionCircleOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';

const { Option } = Select;

interface DataType {
  key: React.Key;
  name: string;
  type: any;
  serviceCharge: any;
}
interface DataType2 {
  key: React.Key;
  ctvname: string;
  type: any;
  serviceCharge: any;
}
interface DataType3 {
  key: React.Key;
  cnpname: string;
  type: any;
  serviceCharge: any;
}
interface DataType4 {
  key: React.Key;
  saomaname: string;
  type: any;
  serviceCharge: any;
}
const hello = 'hello';

const { Panel } = Collapse;
const text = (
  <span>
    PayNow-正扫”产生的交易退货默认不可在“商户端”操作，可申请通过“运营端”开通，且产生的“退货手续费”由商户承担，请告知开通该产品的商户
  </span>
);
const TooltipDom = () => {
  return (
    <Tooltip placement="topLeft" title={text}>
      退货配置 <QuestionCircleOutlined />
    </Tooltip>
  );
};

let data1: DataType[] = [
  {
    key: 1,
    name: `小费`,
    type: [],
    serviceCharge: '',
  },
  {
    key: 2,
    name: `MOTO交易`,
    type: [],
    serviceCharge: '',
  },
  {
    key: 3,
    name: `VISA收单-消费`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 4,
    name: `MASTERCARD收单-消费`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 5,
    name: `UNIONPAY收单-消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 6,
    name: `DINERSCLUB收单-消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 7,
    name: `JCB收单-消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 8,
    name: `收单-预授权`,
    type: [],
    serviceCharge: 'Blended',
  },
];
let data2: DataType2[] = [
  {
    key: 1,
    ctvname: `VISA线上消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 2,
    ctvname: `MASTERCARD线上消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 3,
    ctvname: `JCB线上消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
];
let data3: DataType3[] = [
  {
    key: 1,
    cnpname: `VISA线上消费`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 2,
    cnpname: `MASTERCARD线上消费`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 3,
    cnpname: `DINERSCLUB 线上消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 4,
    cnpname: `JCB线上消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 5,
    cnpname: `AMERICAEXPRESS 线上消费`,
    type: [],
    serviceCharge: 'Blended',
  },
  {
    key: 6,
    cnpname: `UNIONPAY 线上消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 7,
    cnpname: `VISA TOKEN线上消费`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 8,
    cnpname: `MASTERCARD TOKEN线上消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 9,
    cnpname: `AMERICAEXPRESS TOKEN线上消费
    `,
    type: [],
    serviceCharge: 'Blended',
  },
  {
    key: 10,
    cnpname: `UNIONPAY TOKEN线上消费`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 11,
    cnpname: `VISA TOKEN预授权`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 12,
    cnpname: `MASTERCARD TOKEN预授权`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 13,
    cnpname: `AMERICAEXPRESS TOKEN预授权`,
    type: [],
    serviceCharge: 'Blended',
  },
  {
    key: 14,
    cnpname: `UNIONPAY TOKEN预授权`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
];
let data4: DataType4[] = [
  {
    key: 1,
    saomaname: `微信扫码-正扫`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 2,
    saomaname: `微信刷卡-反扫`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 3,
    saomaname: `微信APP支付`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 4,
    saomaname: `微信小程序支付`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 5,
    saomaname: `微信公众号支付`,
    type: [],
    serviceCharge: 'Blended',
  },
  {
    key: 6,
    saomaname: `微信公众号-服务商授权`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 7,
    saomaname: `支付宝扫码-正扫`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 8,
    saomaname: `支付宝刷卡-反扫`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 9,
    saomaname: `支付宝H5支付
    `,
    type: [],
    serviceCharge: 'Blended',
  },
  {
    key: 10,
    saomaname: `支付宝APP支付`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
  {
    key: 11,
    saomaname: `支付宝WEB支付`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 12,
    saomaname: `银联云闪付扫码-正扫`,
    type: ['Blended', 'Regional', 'IC++'],
    serviceCharge: 'Blended',
  },
  {
    key: 13,
    saomaname: `银联云闪付刷卡-反扫`,
    type: [],
    serviceCharge: 'Blended',
  },
  {
    key: 14,
    saomaname: `payNow扫码支付-正扫`,
    type: ['Blended', 'Regional'],
    serviceCharge: 'Blended',
  },
];

const Productlaunch: React.FC = (props: any) => {
  const { formRef } = props;
  const [activeKey, setActiveKey] = useState<React.Key[]>([]);
  const [_data, setData] = useState(data1); //表格一数据
  const [dataSecond, setDataSecond] = useState(data2); //表格二数据
  const [dataThree, setDataThree] = useState(data3); //表格三数据
  const [ledgerFlag, setLedgerFlag] = useState<boolean>(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [selectedRowCheck, setSelectedRowCheck] = useState<React.Key[]>([]);
  const [bigBodyStyle, setBigBodyStyle] = useState<any>({});
  const [bigallstyle, setBigAllstyle] = useState<any>({});
  const [bigwidthflag, setBigwidthflag] = useState<any>({});

  // 移动弹框
  const [open, setOpen] = useState(false);
  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef<HTMLDivElement>(null);

  const showModal = () => {
    setOpen(true);
  };

  const handleOk = (e: React.MouseEvent<HTMLElement>) => {
    setOpen(false);
  };

  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
    setOpen(false);
  };

  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();

    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  useEffect(() => {
    const { canpin } = formRef.current?.getFieldsValue('canpin');
    if (
      canpin?.length !== 0 &&
      canpin?.includes('ctv') &&
      canpin?.includes('cnp')
    ) {
      message.error('不能同时开通CTV和CNP产品');
    }
  }, [activeKey]);

  const columns1: ColumnsType<DataType> = [
    {
      title: '产品名称',
      dataIndex: 'name',
      width: 220,
      key: 'name',
      render(value, record, index) {
        return (
          <Form.Item name={`name${record.key}`}>
            <Input placeholder="Borderless" bordered={false} />
          </Form.Item>
        );
      },
    },
    {
      title: '收费类型',
      dataIndex: 'type',
      key: 'type',
      width: 140,
      render(value, record, index) {
        if (record.type && record.type.length > 0) {
          return (
            <Form.Item name={`tablexuanze${record.key}`}>
              <Select
                allowClear
                style={{ width: '100px' }}
                onChange={(value) => {
                  let newData = data1.map((item) => {
                    if (record.name == item.name) {
                      item.serviceCharge = value;
                    }
                    return item;
                  });
                  setData(newData);
                }}
              >
                {record.type.map((item: any) => {
                  return (
                    <Option key={item} value={item}>
                      {item}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          );
        }
      },
    },
    {
      width: 700,
      title: '手续费',
      dataIndex: 'serviceCharge',
      render(value, record, index) {
        if (record.serviceCharge) {
          if (record.serviceCharge === 'Regional') {
            return (
              <>
                {record.name === 'VISA收单-消费' ||
                record.name === 'MASTERCARD收单-消费' ? (
                  <Form.Item style={{ width: '100%' }}>
                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '130px',
                      }}
                      rules={[{ required: true }]}
                      name={`${record.name}EDC${record.key}`}
                      label="ECC"
                    >
                      <Input addonAfter="%" />
                    </Form.Item>
                    <span
                      style={{
                        display: 'inline-block',
                        lineHeight: '32px',
                        textAlign: 'center',
                      }}
                    >
                      +
                    </span>
                    <Form.Item
                      label="每笔"
                      style={{
                        display: 'inline-block',
                        width: '160px',
                      }}
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                      // name="jiesuan2"
                      name={`${record.name}(SGD)${record.key}`}
                    >
                      <Input addonAfter="(SGD)" />
                    </Form.Item>

                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '150px',
                        marginBottom: '0px',
                      }}
                      // name="jiesuan3"
                      name={`${record.name}保底(SGD)${record.key}`}
                      label="保底(SGD)"
                      rules={[{ required: true }]}
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '150px',
                        marginBottom: '0px',
                      }}
                      // name="jiesuan3"
                      name={`${record.name}MARKUP${record.key}`}
                      label="MARKUP(%)"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                  </Form.Item>
                ) : null}

                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    本地
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="EDC"
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    异地
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                      marginBottom: '0px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="EDC"
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                      marginBottom: '0px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
              </>
            );
          } else if (record.serviceCharge === 'IC++') {
            return (
              <>
                <Form.Item style={{ width: '100%' }}>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="MARKUP(%)"
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    本地
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="Profit Rate(%)"
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="Risk Feel(SGD)"
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="杂项(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    跨境
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="Profit Rate(%)"
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="Risk Feel(SGD)"
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="杂项(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
              </>
            );
          } else if (record.serviceCharge === 'Blended') {
            return (
              <>
                <Form.Item style={{ width: '100%' }}>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="EDC"
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                {record.name == 'VISA收单-消费' ||
                record.name == 'MASTERCARD收单-消费' ? (
                  <Form.Item style={{ width: '100%', marginBottom: '0px' }}>
                    <Form.Item
                      label="DCC"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                      style={{
                        display: 'inline-block',
                        width: '130px',
                        marginBottom: '0px',
                      }}
                      // name="DCC"
                      name={`${record.name}DCC${record.key}`}
                    >
                      <Input addonAfter="%" />
                    </Form.Item>
                    <span
                      style={{
                        display: 'inline-block',
                        lineHeight: '32px',
                        textAlign: 'center',
                      }}
                    >
                      +
                    </span>
                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '160px',
                        marginBottom: '0px',
                      }}
                      label="每笔:"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                      // name="jiesuan2"
                      name={`${record.name}meibi${record.key}`}
                    >
                      <Input addonAfter="(SGD)" />
                    </Form.Item>
                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '150px',
                        marginBottom: '0px',
                      }}
                      // name="jiesuan3"
                      name={`${record.name}MARKUP${record.key}`}
                      label="MARKUP(%)"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                  </Form.Item>
                ) : null}
              </>
            );
          }
        } else if (!(record.type && record.type.length > 0)) {
          return;
        }
      },
    },
    {
      title: '更多配置',
      key: '',
      width: 180,
      fixed: 'right',
      dataIndex: '',
      render(value, record, index) {
        if (record.type && record.type.includes('IC++')) {
          return (
            <Button type="link" onClick={showModal}>
              预览
            </Button>
          );
        }
      },
    },
  ];
  const columns2: ColumnsType<DataType> = [
    {
      title: '产品名称',
      dataIndex: 'ctvname',
      width: 220,
      key: 'ctvname',
      render(value, record, index) {
        return (
          <Form.Item name={`ctvname${record.key}`}>
            <Input placeholder="Borderless" bordered={false} />
          </Form.Item>
        );
      },
    },
    {
      title: '收费类型',
      dataIndex: 'type',
      key: 'type',
      width: 140,
      render(value, record, index) {
        if (record.type && record.type.length > 0) {
          return (
            <Form.Item name={`ctvtype${record.key}`}>
              <Select
                allowClear
                style={{ width: '100px' }}
                onChange={(value) => {
                  let newData = data2.map((item) => {
                    if (record.ctvname == item.ctvname) {
                      item.serviceCharge = value;
                    }
                    return item;
                  });
                  setDataSecond(newData);
                }}
              >
                {record.type.map((item: any) => {
                  return (
                    <Option key={item} value={item}>
                      {item}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          );
        }
      },
    },
    {
      width: 700,
      title: '手续费',
      dataIndex: 'serviceCharge',
      render(value, record, index) {
        if (record.serviceCharge) {
          if (record.serviceCharge === 'Regional') {
            return (
              <>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    本地
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="EDC"
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    跨境
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                      marginBottom: '0px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="EDC"
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                      marginBottom: '0px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
              </>
            );
          } else if (record.serviceCharge === 'Blended') {
            return (
              <>
                <Form.Item style={{ width: '100%' }}>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label=" "
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                {record.name == 'VISA收单-消费' ||
                record.name == 'MASTERCARD收单-消费' ? (
                  <Form.Item style={{ width: '100%', marginBottom: '0px' }}>
                    <Form.Item
                      label="DCC"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                      style={{
                        display: 'inline-block',
                        width: '130px',
                        marginBottom: '0px',
                      }}
                      // name="DCC"
                      name={`${record.name}DCC${record.key}`}
                    >
                      <Input addonAfter="%" />
                    </Form.Item>
                    <span
                      style={{
                        display: 'inline-block',
                        lineHeight: '32px',
                        textAlign: 'center',
                      }}
                    >
                      +
                    </span>
                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '160px',
                        marginBottom: '0px',
                      }}
                      label="每笔:"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                      // name="jiesuan2"
                      name={`${record.name}meibi${record.key}`}
                    >
                      <Input addonAfter="(SGD)" />
                    </Form.Item>
                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '150px',
                        marginBottom: '0px',
                      }}
                      // name="jiesuan3"
                      name={`${record.name}MARKUP${record.key}`}
                      label="MARKUP(%)"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                  </Form.Item>
                ) : null}
              </>
            );
          }
        } else if (!(record.type && record.type.length > 0)) {
          return;
        }
      },
    },
    {
      title: '更多配置',
      key: '',
      width: 180,
      fixed: 'right',
      render(value, record, index) {
        if (record.type && record.type.includes('IC++')) {
          return (
            <Button type="link" onClick={showModal}>
              预览
            </Button>
          );
        } else {
          return <Button type="link">更多配置</Button>;
        }
      },
    },
  ];
  const columns3: ColumnsType<DataType> = [
    {
      title: '产品名称',
      dataIndex: 'cnpname',
      width: 220,
      key: 'ctvname',
      render(value, record, index) {
        return (
          <Form.Item name={`cnpname${record.key}`}>
            <Input placeholder="Borderless" bordered={false} />
          </Form.Item>
        );
      },
    },
    {
      title: '收费类型',
      dataIndex: 'type',
      key: 'type',
      width: 140,
      render(value, record, index) {
        if (record.type && record.type.length > 0) {
          return (
            <>
              <Form.Item name={`cnptype${record.key}`}>
                <Select
                  allowClear
                  style={{ width: '100px' }}
                  onChange={(value) => {
                    let newData = data3.map((item) => {
                      if (record.cnpname == item.cnpname) {
                        item.serviceCharge = value;
                      }
                      return item;
                    });
                    setDataThree(newData);
                  }}
                >
                  {record.type.map((item: any) => {
                    return (
                      <Option key={item} value={item}>
                        {item}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </>
          );
        }
      },
    },
    {
      width: 700,
      title: '手续费',
      dataIndex: 'serviceCharge',
      render(value, record, index) {
        if (record.serviceCharge) {
          if (record.serviceCharge === 'Regional') {
            return (
              <>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    本地
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="EDC"
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    跨境
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                      marginBottom: '0px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="EDC"
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                      marginBottom: '0px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
              </>
            );
          } else if (record.serviceCharge === 'Blended') {
            return (
              <>
                <Form.Item style={{ width: '100%' }}>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '130px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label=" "
                  >
                    <Input addonAfter="%" />
                  </Form.Item>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                    }}
                  >
                    +
                  </span>
                  <Form.Item
                    label="每笔"
                    style={{
                      display: 'inline-block',
                      width: '160px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input addonAfter="(SGD)" />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="保底(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label=" 封顶(SGD)"
                    rules={[{ required: true }]}
                    style={{
                      display: 'inline-block',
                      width: '150px',
                      marginBottom: '0px',
                      // marginRight: '40px',
                    }}
                    // name="jiesuan4"
                    name={`${record.name}fengding${record.key}`}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                {record.name == 'VISA收单-消费' ||
                record.name == 'MASTERCARD收单-消费' ? (
                  <Form.Item style={{ width: '100%', marginBottom: '0px' }}>
                    <Form.Item
                      label="DCC"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                      style={{
                        display: 'inline-block',
                        width: '130px',
                        marginBottom: '0px',
                      }}
                      // name="DCC"
                      name={`${record.name}DCC${record.key}`}
                    >
                      <Input addonAfter="%" />
                    </Form.Item>
                    <span
                      style={{
                        display: 'inline-block',
                        lineHeight: '32px',
                        textAlign: 'center',
                      }}
                    >
                      +
                    </span>
                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '160px',
                        marginBottom: '0px',
                      }}
                      label="每笔:"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                      // name="jiesuan2"
                      name={`${record.name}meibi${record.key}`}
                    >
                      <Input addonAfter="(SGD)" />
                    </Form.Item>
                    <Form.Item
                      style={{
                        display: 'inline-block',
                        width: '150px',
                        marginBottom: '0px',
                      }}
                      // name="jiesuan3"
                      name={`${record.name}MARKUP${record.key}`}
                      label="MARKUP(%)"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                  </Form.Item>
                ) : null}
              </>
            );
          } else if (record.serviceCharge === 'IC++') {
            return (
              <>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    本地
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="Profit Rate(%)"
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="Risk Feel(SGD)"
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="杂项(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                <Form.Item style={{ width: '100%' }}>
                  <span
                    style={{
                      display: 'inline-block',
                      lineHeight: '32px',
                      textAlign: 'center',
                      marginRight: '10px',
                    }}
                  >
                    跨境
                  </span>
                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[{ required: true }]}
                    name={`${record.name}EDC${record.key}`}
                    label="Profit Rate(%)"
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="Risk Feel(SGD)"
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                    // name="jiesuan2"
                    name={`${record.name}(SGD)${record.key}`}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    style={{
                      display: 'inline-block',
                      width: '170px',
                      marginBottom: '0px',
                    }}
                    // name="jiesuan3"
                    name={`${record.name}保底(SGD)${record.key}`}
                    label="杂项(SGD)"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
              </>
            );
          }
        } else if (!(record.type && record.type.length > 0)) {
          return;
        }
      },
    },
    {
      title: '更多配置',
      key: '',
      dataIndex: '',
      width: 180,
      fixed: 'right',
      render(value, record, index) {
        if (record.type && record.type.includes('IC++')) {
          return (
            <>
              <Button type="link" onClick={showModal}>
                预览
              </Button>
              <Button type="link" onClick={showModal}>
                更多配置
              </Button>
            </>
          );
        } else {
          return <Button type="link">更多配置</Button>;
        }
      },
    },
  ];
  const columns4: ColumnsType<DataType> = [
    {
      title: '产品名称',
      dataIndex: 'saomaname',
      width: 220,
      key: 'saomaname',
      render(value, record, index) {
        return (
          <Form.Item name={`saomaname${record.key}`}>
            <Input placeholder="Borderless" bordered={false} />
          </Form.Item>
        );
      },
    },
    {
      title: '收费类型',
      dataIndex: 'type',
      key: 'type',
      width: 90,
      render(value, record, index) {
        if (record.type && record.type.length > 0) {
          return <></>;
        }
      },
    },
    {
      width: 700,
      title: '手续费',
      dataIndex: 'serviceCharge',
      render(value, record, index) {
        return (
          <>
            <Form.Item style={{ width: '100%' }}>
              <Form.Item
                style={{
                  display: 'inline-block',
                  width: '130px',
                }}
                rules={[{ required: true }]}
                name={`${record.name}EDC${record.key}`}
                label=" "
              >
                <Input addonAfter="%" />
              </Form.Item>
              <span
                style={{
                  display: 'inline-block',
                  lineHeight: '32px',
                  textAlign: 'center',
                }}
              >
                +
              </span>
              <Form.Item
                label="每笔"
                style={{
                  display: 'inline-block',
                  width: '160px',
                }}
                rules={[
                  {
                    required: true,
                  },
                ]}
                // name="jiesuan2"
                name={`${record.name}(SGD)${record.key}`}
              >
                <Input addonAfter="(SGD)" />
              </Form.Item>

              <Form.Item
                style={{
                  display: 'inline-block',
                  width: '150px',
                  marginBottom: '0px',
                }}
                // name="jiesuan3"
                name={`${record.name}保底(SGD)${record.key}`}
                label="保底(SGD)"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label=" 封顶(SGD)"
                rules={[{ required: true }]}
                style={{
                  display: 'inline-block',
                  width: '150px',
                  marginBottom: '0px',
                  // marginRight: '40px',
                }}
                // name="jiesuan4"
                name={`${record.name}fengding${record.key}`}
              >
                <Input />
              </Form.Item>
            </Form.Item>
            {record.name == 'VISA收单-消费' ||
            record.name == 'MASTERCARD收单-消费' ? (
              <Form.Item style={{ width: '100%', marginBottom: '0px' }}>
                <Form.Item
                  label="DCC"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  style={{
                    display: 'inline-block',
                    width: '130px',
                    marginBottom: '0px',
                  }}
                  // name="DCC"
                  name={`${record.name}DCC${record.key}`}
                >
                  <Input addonAfter="%" />
                </Form.Item>
                <span
                  style={{
                    display: 'inline-block',
                    lineHeight: '32px',
                    textAlign: 'center',
                  }}
                >
                  +
                </span>
                <Form.Item
                  style={{
                    display: 'inline-block',
                    width: '160px',
                    marginBottom: '0px',
                  }}
                  label="每笔:"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  // name="jiesuan2"
                  name={`${record.name}meibi${record.key}`}
                >
                  <Input addonAfter="(SGD)" />
                </Form.Item>
                <Form.Item
                  style={{
                    display: 'inline-block',
                    width: '150px',
                    marginBottom: '0px',
                  }}
                  // name="jiesuan3"
                  name={`${record.name}MARKUP${record.key}`}
                  label="MARKUP(%)"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Form.Item>
            ) : null}
          </>
        );
      },
    },
    {
      title: '更多配置',
      key: '',
      dataIndex: '',
      width: 180,
      fixed: 'right',
      render(value, record, index) {
        return (
          <Button type="link" onClick={showModal}>
            更多配置
          </Button>
        );
      },
    },
  ];

  // 单选框选择
  const onSelectChange = (
    newSelectedRowKeys: React.Key[],
    selectedRows: any,
  ) => {
    // console.log(
    //   'selectedRowKeys changed: ',
    //   selectedRowKeys,
    //   'selectedRows',
    //   selectedRows,
    // );
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection1: TableRowSelection<DataType> = {
    selectedRowKeys,
    getCheckboxProps: (record: DataType) => {
      return {
        disabled: !selectedRowCheck?.includes('receipt'),
        // name: record.name,
      };
    },
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      // {
      //   key: 'odd',
      //   text: 'Select Odd Row',
      //   onSelect: (changableRowKeys) => {
      //     let newSelectedRowKeys = [];
      //     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
      //       if (index % 2 !== 0) {
      //         return false;
      //       }
      //       return true;
      //     });
      //     setSelectedRowKeys(newSelectedRowKeys);
      //   },
      // },
      // {
      //   key: 'even',
      //   text: 'Select Even Row',
      //   onSelect: (changableRowKeys) => {
      //     let newSelectedRowKeys = [];
      //     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
      //       if (index % 2 !== 0) {
      //         return true;
      //       }
      //       return false;
      //     });
      //     setSelectedRowKeys(newSelectedRowKeys);
      //   },
      // },
    ],
  };
  const rowSelection2: TableRowSelection<DataType> = {
    selectedRowKeys,
    getCheckboxProps: (record: DataType) => {
      return {
        disabled: !selectedRowCheck?.includes('ctv'),
        // name: record.name,
      };
    },
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      // {
      //   key: 'odd',
      //   text: 'Select Odd Row',
      //   onSelect: (changableRowKeys) => {
      //     let newSelectedRowKeys = [];
      //     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
      //       if (index % 2 !== 0) {
      //         return false;
      //       }
      //       return true;
      //     });
      //     setSelectedRowKeys(newSelectedRowKeys);
      //   },
      // },
      // {
      //   key: 'even',
      //   text: 'Select Even Row',
      //   onSelect: (changableRowKeys) => {
      //     let newSelectedRowKeys = [];
      //     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
      //       if (index % 2 !== 0) {
      //         return true;
      //       }
      //       return false;
      //     });
      //     setSelectedRowKeys(newSelectedRowKeys);
      //   },
      // },
    ],
  };
  const rowSelection3: TableRowSelection<DataType> = {
    selectedRowKeys,
    getCheckboxProps: (record: DataType) => {
      return {
        disabled: !selectedRowCheck?.includes('cnp'),
        // name: record.name,
      };
    },
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      // {
      //   key: 'odd',
      //   text: 'Select Odd Row',
      //   onSelect: (changableRowKeys) => {
      //     let newSelectedRowKeys = [];
      //     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
      //       if (index % 2 !== 0) {
      //         return false;
      //       }
      //       return true;
      //     });
      //     setSelectedRowKeys(newSelectedRowKeys);
      //   },
      // },
      // {
      //   key: 'even',
      //   text: 'Select Even Row',
      //   onSelect: (changableRowKeys) => {
      //     let newSelectedRowKeys = [];
      //     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
      //       if (index % 2 !== 0) {
      //         return true;
      //       }
      //       return false;
      //     });
      //     setSelectedRowKeys(newSelectedRowKeys);
      //   },
      // },
    ],
  };
  const rowSelection4: TableRowSelection<DataType> = {
    selectedRowKeys,
    getCheckboxProps: (record: DataType) => {
      return {
        disabled: !selectedRowCheck?.includes('payment'),
        // name: record.name,
      };
    },
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      // {
      //   key: 'odd',
      //   text: 'Select Odd Row',
      //   onSelect: (changableRowKeys) => {
      //     let newSelectedRowKeys = [];
      //     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
      //       if (index % 2 !== 0) {
      //         return false;
      //       }
      //       return true;
      //     });
      //     setSelectedRowKeys(newSelectedRowKeys);
      //   },
      // },
      // {
      //   key: 'even',
      //   text: 'Select Even Row',
      //   onSelect: (changableRowKeys) => {
      //     let newSelectedRowKeys = [];
      //     newSelectedRowKeys = changableRowKeys.filter((_, index) => {
      //       if (index % 2 !== 0) {
      //         return true;
      //       }
      //       return false;
      //     });
      //     setSelectedRowKeys(newSelectedRowKeys);
      //   },
      // },
    ],
  };

  // const bodyStyle = {
  //   height: 'calc(100vh - 55px - 53px)',
  //   overflowY: 'auto',
  // };
  // const allstyle = {
  //   maxWidth: '100vw',
  //   top: 0,
  //   paddingBottom: 0,
  // };
  // const widthflag = {
  //   width: '100vw',
  // };

  return (
    <>
      <Collapse defaultActiveKey={['1']} ghost>
        <Panel header="产品配置 " key="1">
          <Form.Item label="产品" name="canpin">
            <Checkbox.Group
              onChange={(value) => {
                setActiveKey(value);
                setSelectedRowCheck(value);
              }}
            >
              <Checkbox
                value="receipt"
                key="receipt"
                style={{ lineHeight: '32px' }}
              >
                收单
              </Checkbox>

              <Checkbox value="ctv" key="ctv" style={{ lineHeight: '32px' }}>
                CTV
              </Checkbox>

              <Checkbox value="cnp" key="cnp" style={{ lineHeight: '32px' }}>
                CNP
              </Checkbox>

              <Checkbox
                value="payment"
                key="payment"
                style={{ lineHeight: '32px' }}
              >
                扫码支付
              </Checkbox>
            </Checkbox.Group>
          </Form.Item>
          <Collapse
            activeKey={activeKey}
            onChange={(value: any) => {
              setActiveKey(value);
            }}
          >
            <Panel header="收单" key="receipt">
              <Table
                rowSelection={rowSelection1}
                columns={columns1}
                dataSource={data1}
                scroll={{ x: 1000 }}
                pagination={false}
              />
            </Panel>
            <Panel header="CTV" key="ctv">
              <Table
                rowSelection={rowSelection2}
                columns={columns2}
                dataSource={data2}
                scroll={{ x: 1000 }}
                pagination={false}
              />
            </Panel>
            <Panel header="CNP" key="cnp">
              <Table
                rowSelection={rowSelection3}
                columns={columns3}
                scroll={{ x: 1200 }}
                dataSource={data3}
                pagination={false}
              />
            </Panel>
            <Panel header="扫码支付" key="payment">
              <Table
                rowSelection={rowSelection4}
                columns={columns4}
                scroll={{ x: 1000 }}
                dataSource={data4}
                pagination={false}
              />
            </Panel>
          </Collapse>
        </Panel>
        <Panel header="功能配置" key="2">
          <Checkbox
            onChange={(e) => {
              setLedgerFlag(e.target.checked);
            }}
          >
            分账
          </Checkbox>

          <Form.Item name="radio-group" initialValue="bushouqu">
            <Radio.Group disabled={!ledgerFlag}>
              <Radio value="bushouqu">不收取</Radio>
              <Radio value="fuyong">复用分账接受方产品配置及费率</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="radio"
            initialValue="bushouquq"
            label="终端订单支付"
            style={{ marginBottom: '0px' }}
          >
            <Radio.Group>
              <Radio value="bushouquq">不开通</Radio>
              <Radio value="fuyonga">联机模式</Radio>
              <Radio value="fuyongf">脱机模式</Radio>
            </Radio.Group>
          </Form.Item>
        </Panel>
        <Panel header={TooltipDom()} key="3">
          <Form.Item name="tuihuo" label="退货是否退手续费">
            <Radio.Group>
              <Radio value="yes">是</Radio>
              <Radio value="no">否</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item name="kaituohuo" label="是否开通透支退货">
            <Radio.Group>
              <Radio value="yes">是</Radio>
              <Radio value="no">否</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="退货服务费"
            style={{ width: '60%', marginBottom: '0px' }}
          >
            <Form.Item
              style={{
                display: 'inline-block',
                width: '100px',
                marginBottom: '0px',
              }}
              name="tuihuofuwu1"
            >
              <InputNumber addonAfter="%" />
            </Form.Item>
            <span
              style={{
                display: 'inline-block',
                width: '50px',
                lineHeight: '32px',
                textAlign: 'center',
              }}
            >
              +每笔
            </span>
            <Form.Item
              style={{
                display: 'inline-block',
                width: '130px',
                marginBottom: '0px',
              }}
              name="tuihuofuwu2"
            >
              <InputNumber addonAfter="(SGD)" />
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="其他配置" key="4">
          <Form.Item
            label="争取处理服务费"
            style={{ width: '60%', marginBottom: '0px' }}
          >
            <Form.Item
              style={{
                display: 'inline-block',
                width: '100px',
                marginBottom: '0px',
              }}
              name="zhengqu1"
            >
              <InputNumber addonAfter="%" />
            </Form.Item>
            <span
              style={{
                display: 'inline-block',
                width: '50px',
                lineHeight: '32px',
                textAlign: 'center',
              }}
            >
              +每笔
            </span>
            <Form.Item
              style={{
                display: 'inline-block',
                width: '130px',
                marginBottom: '0px',
              }}
              name="zhnegqu2"
            >
              <InputNumber addonAfter="(SGD)" />
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="结算配置" key="5">
          <Form.Item label="结算服务费" style={{ width: '100%' }}>
            <Form.Item
              style={{
                display: 'inline-block',
                width: '100px',
              }}
              name="jiesuan1"
            >
              <InputNumber addonAfter="%" />
            </Form.Item>
            <span
              style={{
                display: 'inline-block',
                //   width: '50px',
                lineHeight: '32px',
                textAlign: 'center',
              }}
            >
              +每笔
            </span>
            <Form.Item
              style={{
                display: 'inline-block',
                width: '130px',
              }}
              name="jiesuan2"
            >
              <InputNumber addonAfter="(SGD)" />
            </Form.Item>

            <Form.Item
              style={{
                display: 'inline-block',
                width: '130px',
                marginBottom: '0px',
              }}
              name="jiesuan3"
              label="保底(SGD)"
              rules={[{ required: true }]}
            >
              <InputNumber />
            </Form.Item>

            <Form.Item
              label="封顶(SGD)"
              rules={[{ required: true }]}
              style={{
                display: 'inline-block',
                width: '130px',
                marginBottom: '0px',
              }}
              name="jiesuan4"
            >
              <InputNumber />
            </Form.Item>
          </Form.Item>

          <Form.Item label="清算规则" style={{ width: '60%' }}>
            <span
              style={{
                display: 'inline-block',
                lineHeight: '32px',
                textAlign: 'center',
              }}
            >
              最低清算金额：（SGD）
            </span>
            <Form.Item
              style={{
                display: 'inline-block',
                width: '100px',
                marginBottom: '0px',
              }}
              name="qingsuan"
            >
              <InputNumber addonAfter="%" />
            </Form.Item>
          </Form.Item>
          <Form.Item label="消费税税率" style={{ width: '60%' }}>
            <Form.Item
              style={{
                display: 'inline-block',
                width: '100px',
                marginBottom: '0px',
              }}
              name="xiaofeisuiq"
            >
              <InputNumber addonBefore="%" />
            </Form.Item>
          </Form.Item>
        </Panel>
      </Collapse>

      <Modal
        style={bigallstyle}
        bodyStyle={bigBodyStyle}
        width={bigwidthflag}
        title={
          <div
            style={{
              width: '100%',
              cursor: 'move',
            }}
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false);
              }
            }}
            onMouseOut={() => {
              setDisabled(true);
            }}
            onFocus={() => {}}
            onBlur={() => {}}
          >
            Draggable Modal
          </div>
        }
        open={open}
        onOk={handleOk} //关闭弹窗
        onCancel={handleCancel} // 打开弹窗
        modalRender={(modal) => {
          return (
            <Draggable
              disabled={disabled}
              bounds={bounds}
              onStart={(event, uiData) => onStart(event, uiData)}
            >
              <div ref={draggleRef}>{modal}</div>
            </Draggable>
          );
        }}
      >
        <p>
          <Button
            onClick={() => {
              setBounds({
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
              });

              setBigBodyStyle({
                height: 'calc(100vh - 55px - 53px)',
                overflowY: 'auto',
              });
              setBigAllstyle({
                // maxWidth: '100vw',
                top: 0,
                paddingBottom: 0,
              });
              setBigwidthflag({
                width: '100vw',
              });
            }}
          >
            点击变大
          </Button>

          <Button
            onClick={() => {
              setBigBodyStyle({});
              setBigAllstyle({});
              setBigwidthflag({});
            }}
          >
            点击变小
          </Button>
        </p>
        <br />
        <p>222</p>
      </Modal>
    </>
  );
};

export default Productlaunch;
